<template>
  <div class="order-song-wrapper">
    <div class="search-input">
      <div class="label">在线用户</div>
    </div>
    <div class="order-list common-list" v-loading="loading">
      <ul>
        <li v-for="(item, idx) in online" :key="idx">
          <div class="album">
            <!-- <img :src="item.avatar" alt="" /> -->
            <el-avatar size="large" :src="item.avatar"></el-avatar>
          </div>
          <div class="song-info">
            <div class="song-name">
              {{ item.username || '游客' }}
            </div>
            <div class="song-artist">
              <span>签名</span>
            </div>
          </div>
          <div class="song-order"></div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { CommonEnum } from '@/enums'
import { computed, onMounted, reactive, ref, toRefs } from 'vue'
import { useStore } from 'vuex'
import { useObserverHook } from '@/hooks'
import { ElMessage } from 'element-plus'
export default {
  setup() {
    const store = useStore()
    const searchKey = ref('')

    let state = reactive({
      songCount: 0,
      pageNum: CommonEnum.PAGE.pageNum,
      pageSize: CommonEnum.PAGE.pageSize,
      musicId: null,
      loading: false
    })
    let online = computed(() => {
      return store.getters.online
    })

    return {
      ...toRefs(state),
      online
    }
  }
}
</script>
<style lang="scss">
@import '@/style/mixin.scss';
.order-song-wrapper {
  height: 100%;
  .order-list {
    height: calc(100% - 65px);
  }
  .search-input {
    background: #fff;
    margin: 0 0 10px 0;
    .label {
      padding: 12px;
      text-align: left;
      font-size: 18px;
      background-color: #fff;
    }
    .input {
      display: flex;
      padding: 0 12px 0 12px;
    }
    .el-input__inner {
      border-radius: 4px 0 0 4px;
      border-right: none;
    }
    .el-button--small {
      border-radius: 0 4px 4px 0;
    }
  }
}
</style>
